<template>
  <div class="main">
    <div>
      <el-container>
        <el-main style="width: 600px">
          <img class="top_button" @click="StartCount" src="../images/start.png" >
          <img class="top_button" @click="addMonkey" src="../images/add.png">
          <img class="top_button" @click="showKing" src="../images/king.png" >
          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏显示`" placement="bottom" >
            <img class="top_button" @click="handleFullScreen" src="../images/fullscreen.png" >
          </el-tooltip>
          <img class="top_button" :src="getVoiceImg()" @click="showBackgroundVoice" alt="">
        </el-main>
        <el-aside style="width: 400px">
          <img id="dragEnd"
               @drop="drop($event)" @dragenter="dragenter" @dragover="dragover"
               src="../images/blackhole.gif" alt=""/>
        </el-aside>
      </el-container>
    </div>
    <div id="div_anime_w">
      <img id="monkey_anime_w" :src='this.winMonkey' alt="no image" v-if="showAnimaW"/>
    </div>
    <div id="div_anime_d">
      <img id="monkey_anime_d" :src='this.dMonkey' alt="no image" v-if="showAnimaD"/>
    </div>
    <el-container>
      <el-main id="elMain"></el-main>
      <el-footer>
        <el-row>
          <el-col
            v-for="(item,index) in monkey_confirm"
            :key = index
            :span="3">
            <div id="monkeyC">
              <el-container>
                <el-main id="up">
                  <div class="cloud" v-if="item['show']">
                    <p id="countN">{{item['img'] + 1}}</p>
                  </div>
                </el-main>
                <el-footer id="bottom">
                  <div slot="content">{{item['index']}}</div>
                  <img
                    :src="getMonkeyImg(item)"
                    class="monkey"
                    :id="item['index']"
                    alt=""
                    v-if="item['final'] && item['exist']"
                    draggable="true"
                    @dragstart="drag($event,item)">
                </el-footer>
              </el-container>
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: 'GameMain',
  data () {
    return {
      monkeys: 0,
      quitN: 0,
      monkey_confirm: [],
      visible: false,
      timer: null,
      value: 0,
      currentM: 1,
      doneM: 0,
      showAnimaW: false,
      showAnimaD: false,
      backMusic: null,
      backOgg: null,
      musicStop: 0,
      winTime: false,
      noWinTime: true,
      dragItem:{},
      fullscreen: false,
      winMonkey:"",
      dMonkey:"",
      king_selected: false,
      all_users:[],
    }
  },
  created: function () {
    this.$data.all_users = JSON.parse(localStorage.getItem("all_users"))
    console.log(this.$data.all_users)
    this.monkeys = this.$route.query.monkeys
    this.quitN = this.$route.query.quitN
    this.monkey_confirm = []
    this.value = 0
    this.currentM = 0
    this.doneM = 0

    this.backMusic = "../static/game.mp3"
    this.backOgg = new Audio(this.backMusic)

    clearInterval(this.timer)
    for (let i = 0; i < this.monkeys; i++) {
      let temp = {'index': i + 1,'counted': false,'final': true,'img': 1,'show': false,'exist': true}
      this.monkey_confirm.push(temp)
    }
  },

  methods: {
    addMonkey () {
      let num = Number(this.monkeys)
      console.log("adding" + this.monkey_confirm.length)
      num += 1
      let temp = {'index': num,'counted': false,'final': true,'img': 1,'show': false,'exist': true}
      this.monkey_confirm.push(temp)
      this.monkeys = num
      console.log("add down" + this.monkey_confirm.length)
    },
    delMonkey (item) {
      let i = 0;
      for (i; i < this.monkey_confirm.length; i++) {
        if (this.monkey_confirm[i]['index'] === item) {
          this.monkey_confirm[i]['exist'] = false
          this.dMonkey = require(`../images/monkey${(i + 1)%8}.png`)
          break;
        }
      }
      this.doneM++
      this.showAnimaD = true
      setTimeout(()=>{this.showAnimaD = false},2000)
    },
    StartCount () {
      this.timer = setInterval(this.count, 1000)
    },
    showBackgroundVoice(){
      if(this.musicStop===0){
        this.backOgg.play()
        this.musicStop = 1
      }else{
        this.backOgg.pause()
        this.musicStop = 0
      }
    },
    getVoiceImg(){
      if(this.musicStop === 0){
        return require(`../images/startMusic.png`)
      }
      if(this.musicStop === 1){
        return require(`../images/stop.png`)
      }
    },
    count() {
      if(this.king_selected){
        alert("已选出猴王，请重新开始！")
      }
      let tempM = Number(this.monkeys)
      console.log("tempM" + tempM)
      //如果只剩最后一只猴子
      if(this.doneM === tempM - 1){
        this.king_selected = true
        let tempV = this.value
        if(tempV === 0){
          tempV = tempM
        }
        while(this.monkey_confirm[tempV - 1]['exist'] === false && tempV - 1 !== this.value){
          tempV--;
        }
        this.monkey_confirm[tempV - 1]['show'] = false
        while(true){
          //找到最后那只猴子
          if(this.value === tempM){
            this.value = 0
          }
          if(this.monkey_confirm[this.value]['counted'] === true || this.monkey_confirm[this.value]['exist'] === false){
            this.value++
          }
          else{
            this.winMonkey = require(`../images/monkey${(this.value + 1)%8}.png`)
            let winVoice = "../static/winMonkey.ogg"
            let winOgg = new Audio(winVoice)
            winOgg.play()
            setTimeout(()=>{this.monkey_confirm[this.value]['final'] = false;
              this.showAnimaW = true},2000)
            break
          }
        }
        clearInterval(this.timer)
        return
      }
      //报数报到报到最后一只，从头开始继续数
      if(this.value === tempM) {
        let tempV = this.value
        while(this.monkey_confirm[tempV - 1]['exist'] === false){
          tempV--;
        }
        this.monkey_confirm[tempV - 1]['show'] = false
        this.value = 0
        this.$forceUpdate()
      }
      //删除前一个报数图片
      if(this.value > 0){
        let tempV = this.value
        while(this.monkey_confirm[tempV - 1]['exist'] === false){
          tempV--;
        }
        this.monkey_confirm[tempV - 1]['show'] = false
      }
      console.log("v" + this.value)
      //找到下一个还能报数的猴子
      while(true){
        if(this.value === tempM){
          this.value = 0
        }
        if(this.monkey_confirm[this.value]['counted'] === true || this.monkey_confirm[this.value]['exist'] === false){
          this.value++
        }
        else{
          break
        }
      }
      //显示报数图片
      let tempN = Number(this.quitN)
      console.log(this.value)
      this.monkey_confirm[this.value]['img'] = this.currentM
      this.monkey_confirm[this.value]['show'] = true
      //报到淘汰数，更改猴子图片为哭泣猴子
      if(this.currentM + 1 === tempN){
        this.monkey_confirm[this.value]['counted'] = true
        this.currentM = -1
        this.doneM++
        let lCounter = "../static/loseMonkey.ogg"
        let lCounting = new Audio(lCounter)
        lCounting.play()
      }else{
        let counter = "../static/counting.ogg"
        let counting = new Audio(counter)
        counting.play()
      }
      this.value++
      this.currentM++
    },
    getMonkeyImg(item){
      if(item['counted'] === false){
        return require(`../images/monkey${item['index']%8}.png`)
      }
      else if(item['counted'] === true){
        return require(`../images/lose.gif`)
      }
    },
    move() {
      document.getElementById("aaa").style.width = "300px";
    },
    small() {
      document.getElementById("aaa").style.width = "100px";
    },
    drag(ev,item){
      console.log('------drag------')
      this.dragItem = item
      console.log(this.dragItem['index'])
    },
    drop(ev) {
      console.log('------drop------')
      ev.preventDefault()
      this.delMonkey(this.dragItem['index'])
    },
    dragenter(){
      console.log('------dragenter------')
    },
    //进入拖拽区域后多次触发
    dragover(event){
      console.log('------dragover------')
      event.preventDefault();
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    handleClose(done) {
      done();
    },

    getKing() {
      let tempM = Number(this.monkeys)
      let count = 0
      while(count < tempM){
        if(this.monkey_confirm[count]['counted'] === true || this.monkey_confirm[count]['exist'] === false){
          count++
        }
        else{
          break
        }
      }
      return count
    },
    showKing(){
      if(!this.king_selected){
        this.$router.push('ShowKing')
      }
      else{
        let count = this.getKing()
        this.backOgg.pause()
        this.backMusic = "../static/king.mp3"
        this.backOgg = new Audio(this.backMusic)
        this.backOgg.play()
        count++
        this.changKing(count)
        this.$router.push('ShowKing')
      }
    },
    //传入新猴王的图片地址
    changKing(newKing){
      console.log(this.$user)
      let users = this.$data.all_users
      let new_user = { account:this.$user_account,
        password:this.$user_password,
        monkeyKing:newKing
      }
      users.splice(this.$user,1,JSON.stringify(new_user))
      localStorage.setItem("all_users",JSON.stringify(users))
      console.log(users)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>

el-card {
  width: 20%;
}
.monkey {
  width: 150px;
  height: 150px;
}
.main {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../images/img_1.png");
}
#elMain{
  height: 50px;
}
#monkeyC{
  height: 70px;
  width: 70px;
  margin-left: 20px;
  margin-right: 20px;
}
#div_anime_w {

  width:100px;
  height:50px;
  position:relative;
}
#monkey_anime_w{
  width: 100px;
  height: 140px;
  position:relative;
  animation:myMove 5s infinite;
  animation-delay:2s;
  animation-iteration-count: 2;

  /*Safari and Chrome*/
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation:myMove 5s infinite;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  /*-webkit-animation-delay: 10s;*/
}
@keyframes myMove
{
  0% {left:100px;top:200px}
  33% {left:800px;top:50px;width: 80px;height: 80px }
  66% {left:450px;top:-100px;width: 60px;height: 60px }
  100% {left:770px;top:-260px;width: 40px;height: 40px }
}
@-webkit-keyframes myMove
{
  from {left:0;top:0
  }
  to {left:200px;top:200px }
}
#div_anime_d {
  width:100px;
  height:50px;
  position:relative;
}
#monkey_anime_d{
  width: 66%;
  height: 66%;
  position: absolute;
  top: 22%;
  left: 2%;
  z-index: 1;
  background-size: contain;
  -webkit-animation: round_animate 2s linear;
  animation: round_animate 2s linear;
}
@keyframes round_animate {
  from{
    left:1300px;top:-240px;
    opacity: 100%;
  }
  to {
    left:1300px;top:-240px;
    transform: rotate(1turn);
    opacity: 0%;
  }
}
.cloud {
  margin-left: 2px;
  height: 55px;
  width: 52px;
  background: url("../images/cloud.png");
}
#up {
  height: 120px;
  width: 120px;
}
#bottom {
  height: 80px;
}
#countN {
  padding-top: 20px;
  padding-left: 20px;
}
#dragEnd {
  width: 400px;
  height: 300px;
}
.top_button {
  width: 100px;
  height: 100px;
}
.top_button:hover{
  border-radius: 5px;
  color: #fff;
  background: #fd9001;
  border-radius: 1px;
  box-shadow: 0 0 5px 0 #03e9f4,
  0 0 25px 0 #03e9f4,
  0 0 50px 0 #03e9f4,
  0 0 100px 0 #03e9f4;
  transition: all .5s linear;
}

</style>
